<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <div class="imgWrite-top">
      <h4 style="text-align: left; color: #126bff; margin-bottom: 20px">
        菜单管理
      </h4>
      <div>
        <el-form
          ref="elForm"
          :model="formData"
          size="medium"
          label-width="90px"
          style="width: 100%"
        >
          <el-form-item
            label="菜单名称："
            prop="me_name"
            style="width: 410px; float: left"
          >
            <el-input
              v-model="formData.s_name"
              placeholder="请输入菜单名称"
              clearable
              style="float: left; width: 280px; height: 40px"
            >
            </el-input>
          </el-form-item>
          <div style="float: left">
            <el-button @click="resetForm()" id="reset">重置</el-button>
            <el-button
              type="primary"
              @click="submitForm(formData)"
              id="submitForm"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <div class="admin-content">
      <!--  -->
      <p class="content-top">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addMenu"
          v-if="userInfo.menuAddmenu"
          >添加菜单</el-button
        >
        <!-- <el-button
          type="primary"
          icon="el-icon-delete-solid"
          @click="deleteTtem"
          >批量删除</el-button
        > -->
      </p>
      <div class="warn-content" style="width: 100%">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%; border-radius: 10px"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="me_id" label="id"> </el-table-column>
          <el-table-column prop="me_code" label="菜单编号"> </el-table-column>
          <el-table-column prop="me_name" label="菜单名称"></el-table-column>
          <el-table-column prop="me_icon" label="图标编码"></el-table-column>
          <el-table-column prop="me_update" label="更新时间"> </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <!-- <el-button
                type="text"
                size="small"
                @click="zuiyuan(scope.row)"
                v-if="scope.row.me_father_path == 0"
                >资源</el-button
              > -->
              <!--  -->
              <!--v-if="!userInfo.resources.secondMenu"  -->
              <el-button
                type="text"
                size="small"
                @click="second(scope.row)"
                v-if="userInfo.menuSecond"
                >二级</el-button
              >
              <!-- v-if="!userInfo.resources.editHandleClickMenu" -->

              <el-button
                v-if="userInfo.menuEdit"
                @click="editHandleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <!-- v-if="userInfo.resources.delHandleClickMenu" -->
              <el-button
                v-if="userInfo.menuDelete"
                @click="delHandleClick(scope.row)"
                type="text"
                size="small"
                style="color: #ff4444"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="tableData.length"
          style="float: right; margin-top: 20px"
        >
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="550px"
        top="0"
        style="border-radius: 20px"
      >
        <div style="display: flex; flex-wrap: wrap; text-align: left">
          <div>111</div>
        </div>
      </el-dialog>
      <!-- 添加菜单 -->
      <el-dialog
        :title="title"
        :visible.sync="addVisible"
        width="620px"
        top="0"
        style="border-radius: 20px"
      >
        <div style="text-align: left">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="上级菜单" prop="me_father_path">
              <el-input
                v-model="form.me_father_path"
                :disabled="title == '添加菜单' ? false : true"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单编码" prop="me_code">
              <el-input v-model="form.me_code"></el-input>
            </el-form-item>
            <el-form-item label="菜单名称" prop="me_name">
              <el-input v-model="form.me_name"></el-input>
            </el-form-item>
            <el-form-item label="图标编码" prop="me_icon">
              <el-input v-model="form.me_icon"></el-input>
            </el-form-item>
            <el-form-item label="菜单地址" prop="me_router">
              <el-input v-model="form.me_router"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="me_router">
              <el-input v-model="form.me_sort"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button
                @click="handleClose()"
                style="
                  background-color: #e6effa;
                  color: #126bff;
                  border-radius: 6px;
                "
                >取消</el-button
              >
              <el-button
                type="primary"
                @click="onSubmit('form')"
                style="
                  color: #ffffff;
                  background-color: #126bff;
                  border-radius: 6px;
                "
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <!-- 资源弹窗 资源目前不早知道怎么绑定-->
      <el-dialog
        title="修改资源"
        :visible.sync="ziyuans"
        width="1050px"
        top="0"
        style="border-radius: 20px"
      >
        <p class="content-top">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addSoureces(resourceData.m_id)"
            style="border-radius: 6px"
            >添加资源</el-button
          >
        </p>

        <div style="text-align: left">
          <el-table :data="ziyuanForm" style="width: 100%" border>
            <el-table-column prop="re_id" label="id"> </el-table-column>
            <el-table-column prop="re_api_path" label="资源路径">
            </el-table-column>
            <el-table-column prop="re_name" label="资源名称"></el-table-column>
            <el-table-column prop="re_code" label="资源编码"></el-table-column>
            <el-table-column prop="re_module" label="资源模块">
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <!-- v-if="userInfo.resources.editHandleClickMenu" -->
                <el-button
                  @click="editSource(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
                <!-- v-if="userInfo.resources.delHandleClickMenu" -->

                <el-button
                  @click="delSource(scope.row)"
                  type="text"
                  size="small"
                  style="color: #ff4444"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-form
            ref="form"
            :model="ziyuanForm"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item label="资源编号" prop="me_father_path">
              <el-input v-model="ziyuanForm.re_id"></el-input>
            </el-form-item>
            <el-form-item label="资源名称" prop="me_code">
              <el-input v-model="ziyuanForm.re_name"></el-input>
            </el-form-item>
            <el-form-item label="模块" prop="me_name">
              <el-input v-model="ziyuanForm.re_module"></el-input>
            </el-form-item>
            <el-form-item label="控制器" prop="me_icon">
              <el-input v-model="ziyuanForm.re_controller"></el-input>
            </el-form-item>
            <el-form-item label="方法" prop="me_router">
              <el-input v-model="ziyuanForm.re_action"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button
                @click="CloseZiyuan()"
                style="background-color: #e6effa; color: #126bff"
                >取消</el-button
              >
              <el-button
                type="primary"
                @click="onSubmitZiyuan('form')"
                style="color: #ffffff; background-color: #126bff"
                >确定</el-button
              >
            </el-form-item>
          </el-form> -->
        </div>
      </el-dialog>
      <!-- 二级菜单弹窗 -->
      <el-dialog
        title="二级菜单"
        :visible.sync="secondMenu"
        width="1128px"
        top="0"
        style="border-radius: 20px"
      >
        <div>
          <div class="imgWrite-top" style="height: 80px">
            <div>
              <el-form
                ref="elForm"
                :model="secformData"
                size="medium"
                label-width="100px"
                style="display: flex"
              >
                <el-form-item
                  label="菜单名称 ："
                  prop="me_name"
                  style="width: 600px"
                >
                  <el-input
                    v-model="secformData.s_name"
                    placeholder="请输入菜单名称"
                    clearable
                    style="
                      float: left;
                      width: 480px;
                      height: 40px;
                      display: inline-block;
                    "
                  >
                  </el-input>
                </el-form-item>
                <el-form-item id="menuSec">
                  <el-button @click="secSesetForm()" id="reset">重置</el-button>
                  <el-button
                    type="primary"
                    @click="secSubmitForm(secformData)"
                    id="submitForm"
                    >查询</el-button
                  >
                </el-form-item>
                <!-- <div style="float: left"></div> -->
              </el-form>
            </div>
          </div>
          <!-- v-if="userInfo.resources.addMenu" -->
          <p class="content-top">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addMenu"
              style="
                height: 36px;
                background-color: #126bff;
                border-radius: 6px;
                opacity: 1;
                color: #ffffff;
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                margin-left: 10px;
              "
              >添加菜单</el-button
            >
          </p>
          <el-table
            :data="
              SecTableData.slice(
                (SecCurrentpage - 1) * SecPageSize,
                SecCurrentpage * SecPageSize
              )
            "
            style="width: 100%"
            border
          >
            <el-table-column prop="me_id" label="id"> </el-table-column>
            <el-table-column prop="me_code" label="菜单编号"> </el-table-column>
            <el-table-column prop="me_name" label="菜单名称"></el-table-column>
            <el-table-column prop="me_icon" label="图标编码"></el-table-column>
            <el-table-column prop="me_update" label="更新时间">
            </el-table-column>
            <el-table-column label="操作" width="200">
              <!-- v-if="userInfo.resources.zuiyuanMenu" -->
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="zuiyuan(scope.row)"
                  >资源</el-button
                >
                <!-- v-if="userInfo.resources.editHandleClickMenu" -->

                <el-button
                  @click="editHandleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
                <!-- v-if="userInfo.resources.delHandleClickMenu" -->

                <el-button
                  @click="delHandleClick(scope.row)"
                  type="text"
                  size="small"
                  style="color: #ff4444"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="secHandleSizeChange"
            @current-change="secHandleCurrentChange"
            :current-page="SecCurrentpage"
            :page-sizes="[10, 20, 30]"
            :page-size="SecPageSize"
            layout="total, prev, pager, next, sizes"
            :total="SecTableData.length"
            style="float: right; margin-top: 20px"
          >
          </el-pagination>
          <br />
          <p
            slot="footer"
            class="dialog-footer"
            style="margin-top: 60px; text-align: right"
          >
            <el-button
              @click="secondMenu = false"
              style="
                background-color: #e6effa;
                color: #126bff;
                margin-left: 10px;
                height: 36px;
                width: 78px;
                border-radius: 6px;
                opacity: 1;
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
              "
              >取消</el-button
            >
            <el-button
              type="primary"
              @click="onSubmit('form')"
              style="
                height: 36px;
                width: 78px;
                background-color: #126bff;
                border-radius: 6px;
                opacity: 1;
                color: #ffffff;
                font-size: 14px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                margin-left: 10px;
              "
              >确定</el-button
            >
          </p>
        </div>
      </el-dialog>
      <!-- 添加资源弹窗 -->
      <el-dialog
        title="添加资源"
        :visible.sync="addSource"
        width="1128px"
        top="0"
        style="border-radius: 20px"
      >
        <el-form
          ref="addNewSources"
          :model="addNewSource"
          :rules="SourcesRules"
          label-width="90px"
        >
          <el-form-item label="资源编号:" prop="re_code">
            <el-input
              v-model="addNewSource.re_code"
              placeholder="请输入资源编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源名称:" prop="re_name">
            <el-input
              v-model="addNewSource.re_name"
              placeholder="请输入资源名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="模块名称:" prop="re_module">
            <el-input
              v-model="addNewSource.re_module"
              placeholder="请输入模块名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="控制器名称:" prop="re_controller">
            <el-input
              v-model="addNewSource.re_controller"
              placeholder="请输入控制器名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="方法名称:" prop="re_action">
            <el-input
              v-model="addNewSource.re_action"
              placeholder="请输入方法名称:"
            ></el-input>
          </el-form-item>
        </el-form>
        <p
          slot="footer"
          class="dialog-footer"
          style="margin-top: 60px; text-align: right"
        >
          <el-button
            @click="cancelSource('addNewSources')"
            style="
              background-color: #e6effa;
              color: #126bff;
              border-radius: 6px !important;
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="onSubmitSource('addNewSources')"
            style="
              color: #ffffff;
              background-color: #126bff;
              border-radius: 6px !important;
            "
            >确定</el-button
          >
        </p>
      </el-dialog>
      <!-- 编辑资源弹窗 -->
      <el-dialog
        title="编辑资源"
        :visible.sync="editSourceS"
        width="1128px"
        top="0"
        style="border-radius: 20px"
      >
        <el-form ref="editSource" :model="editSourceData" label-width="90px">
          <el-form-item label="资源编号:" prop="re_id">
            <el-input
              v-model="editSourceData.re_code"
              placeholder="请输入资源编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源名称:" prop="re_name">
            <el-input
              v-model="editSourceData.re_name"
              placeholder="请输入资源名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="模块名称:" prop="re_module">
            <el-input
              v-model="editSourceData.re_module"
              placeholder="请输入模块名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="控制器名称:" prop="re_controller">
            <el-input
              v-model="editSourceData.re_controller"
              placeholder="请输入控制器名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="方法名称:" prop="re_action">
            <el-input
              v-model="editSourceData.re_action"
              placeholder="请输入方法名称:"
            ></el-input>
          </el-form-item>
        </el-form>
        <p
          slot="footer"
          class="dialog-footer"
          style="margin-top: 60px; text-align: right"
        >
          <el-button
            @click="cancelSource('editSource')"
            style="
              background-color: #e6effa;
              color: #126bff;
              border-radius: 6px !important;
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="onSubmitSource('editSource')"
            style="
              color: #ffffff;
              background-color: #126bff;
              border-radius: 6px !important;
            "
            >确定</el-button
          >
        </p>
      </el-dialog>
      <!-- 删除确认 -->
      <el-dialog
        title="提示"
        :visible.sync="deleteItem"
        width="30%"
        top="0"
        :before-close="handleClose"
      >
        <span>确认删除该资源吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteItem = false" id="h">取 消</el-button>
          <el-button type="primary" @click="deleteConfirm" id="c"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 删除菜单 -->
      <el-dialog
        title="提示"
        :visible.sync="deleteMenuItem"
        width="30%"
        top="0"
        :before-close="handleClose"
      >
        <span>确认删除该菜单吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteMenuItem = false" id="h">取 消</el-button>
          <el-button type="primary" @click="deleteMenuConfirm" id="c"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// editAdminMenu
import {
  searchAdminMenuPage,
  addAdminMenu,
  editAdminMenu,
  deleteAdminMenu,
  editAdminResource,
  addAdminResource,
  deleteAdminResource,
} from "@/api/permisson";
import { searchAdminResourcePage } from "@/api/resource";
import { Loading } from "element-ui";
export default {
  name: "APP",
  components: {},
  data() {
    // 菜单表单验证
    var validatePass2 = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入上级菜单名称"));
      } else {
        callback();
      }
    };
    var code = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入菜单编码"));
      } else {
        callback();
      }
    };
    var menuName = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入菜单名称"));
      } else {
        callback();
      }
    };
    var menuIcon = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入图标编码"));
      } else {
        callback();
      }
    };
    var menuRouter = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入菜单地址"));
      } else {
        callback();
      }
    };
    // 资源表单验证
    var validateRe_code = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入资源编号"));
      } else {
        callback();
      }
    };
    var validateRe_name = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入资源名称"));
      } else {
        callback();
      }
    };

    var validateRe_module = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入模块名称"));
      } else {
        callback();
      }
    };
    var validateRe_controller = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入控制器名称"));
      } else {
        callback();
      }
    };
    var validateRe_action = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入方法名称"));
      } else {
        callback();
      }
    };
    return {
      userInfo: null,
      dialogVisible: false,
      addVisible: false,
      editVisible: false,
      value1: true,
      ziyuans: false,
      secondMenu: false, // 二级菜单弹窗
      addSource: false,
      editSourceS: false,
      deleteItem: false,
      deleteMenuItem: false,
      title: "添加菜单",
      sourceTitle: "添加资源",
      formData: {
        page: 1,
        pageSize: 20,
        s_name: "",
      },
      secformData: {
        page: 1,
        pageSize: 20,
        s_name: "",
      },
      currentPage4: 2,
      // 按页数查询数据
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      SecTableData: [],
      SecCurrentpage: 1,
      SecPageSize: 10,
      form: {
        me_father_path: "",
        me_code: "",
        me_name: "",
        me_icon: "",
        me_router: "",
        me_sort: 0,
        me_id: "",
      },
      // 修改资源
      ziyuanForm: [],
      rules: {
        me_father_path: [
          {
            validator: validatePass2,
            trigger: "blur",
            required: true,
          },
        ],
        me_code: [
          {
            validator: code,
            trigger: "blur",
            required: true,
          },
        ],
        me_name: [
          {
            validator: menuName,
            trigger: "blur",
            required: true,
          },
        ],
        me_icon: [
          {
            validator: menuIcon,
            trigger: "blur",
            required: true,
          },
        ],
        me_router: [
          {
            validator: menuRouter,
            trigger: "blur",
            required: true,
          },
        ],
      },
      // 添加资源表单验证
      SourcesRules: {
        re_code: [
          {
            validator: validateRe_code,
            trigger: "blur",
            required: true,
          },
        ],
        // validateRe_name
        re_name: [
          {
            validator: validateRe_name,
            trigger: "blur",
            required: true,
          },
        ],
        // re_module  re_controller re_action
        re_module: [
          {
            validator: validateRe_module,
            trigger: "blur",
            required: true,
          },
        ],
        re_controller: [
          {
            validator: validateRe_controller,
            trigger: "blur",
            required: true,
          },
        ],
        re_action: [
          {
            validator: validateRe_action,
            trigger: "blur",
            required: true,
          },
        ],
      },
      deleteCheckedArr: [],
      searMenu: {
        page: 1,
        pageSize: 40,
        s_name: "",
        s_father_path: "",
      },
      // 资源
      resourceData: {
        m_id: "",
        page: 1,
        pageSize: 40,
      },
      // 新建资源
      addNewSource: {
        re_code: "", //资源编号
        re_name: "", //测试资源
        re_module: "", //模块名称
        re_controller: "", //控制器名称
        re_action: "", //方法名称
        re_menu_id: "", // 父级菜单ID
      },
      // 编辑资源
      editSourceData: {
        re_code: "", // 资源编码
        re_id: "", //资源id
        re_name: "", //测试资源
        re_module: "", //模块名称
        re_controller: "", //控制器名称
        re_action: "", //方法名称
      },
      // 删除资源
      deleteData: {
        re_id: "",
      },
      // 删除菜单
      deleteMenu: {
        me_id: "",
      },
    };
  },
  created() {},
  mounted() {
    this.initData();
    this.$nextTick(() => {
      // this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      console.log(this.userInfo.resources.addMenu);
    });
    this.userInfo = JSON.parse(localStorage.getItem("userInfo")).resources;
  },
  methods: {
    // 数据初始化
    initData() {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      searchAdminMenuPage(this.searMenu).then((res) => {
        if (res.code == 200) {
          console.log(res.data.list);
          res.data.list.forEach((item) => {
            item.me_update = this.$moment(item.me_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.tableData = res.data.list;
          loadingInstance.close();
        } else {
          alert(res.message);
          loadingInstance.close();
        }
      });
    },
    // 条件查询
    submitForm(data) {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
        title: "查询中",
      });
      console.log(data);
      searchAdminMenuPage(data).then((res) => {
        if (res.code == 200) {
          console.log(res.data.list);
          loadingInstance.close();
          res.data.list.forEach((item) => {
            item.me_update = this.$moment(item.me_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          // setTimeout(function () {
          this.tableData = res.data.list;
          this.currentPage = 1;
          // }, 0);
        } else {
          alert(res.message);
          loadingInstance.close();
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
      this.formData.s_name = "";
      this.initData();
      this.currentPage = 1;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // @size-change="secHandleSizeChange"
    //         @current-change="secHandleCurrentChange"
    secHandleSizeChange(val) {
      this.SecPageSize = val;
    },
    secHandleCurrentChange(val) {
      this.SecCurrentpage = val;
    },
    //编辑弹窗
    editHandleClick(row) {
      console.log(row);
      this.addVisible = !this.addVisible;
      this.form.me_father_path = row.me_father_path;
      this.form.me_code = row.me_code;
      this.form.me_name = row.me_name;
      this.form.me_router = row.me_router;
      this.form.me_sort = row.me_sort;
      this.form.me_icon = row.me_icon;
      this.form.me_id = row.me_id;
      this.title = "编辑";
    },

    // 取消
    handleClose(form) {
      console.log(form);
      this.addVisible = false;

      this.$refs["form"].resetFields();
    },
    // 添加菜单
    addMenu() {
      this.title = "添加菜单";
      (this.form = {
        me_father_path: "",
        me_code: "",
        me_name: "",
        me_icon: "",
        me_router: "",
        me_sort: 0,
      }),
        (this.addVisible = true);
    },
    // ===============
    // 二级
    second(row) {
      console.log(row);
      this.secondMenu = true;
      this.SecTableData = this.tableData;
    },
    // 二级菜单弹窗菜单查询
    secSubmitForm(data) {
      console.log(data);
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
        title: "查询中",
      });
      console.log(data);
      searchAdminMenuPage(data).then((res) => {
        if (res.code == 200) {
          // console.log(res.data.list);
          loadingInstance.close();
          res.data.list.forEach((item) => {
            item.me_update = this.$moment(item.me_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });

          this.SecTableData = res.data.list;
          console.log(this.SecTableData);
        } else {
          // alert(res.message);
          this.$message = res.message;
          // loadingInstance.close();
        }
      });
    },
    // 二级菜单弹窗菜单查询重置
    secSesetForm() {
      this.secformData.s_name = "";
      this.SecTableData = this.tableData;
    },
    // ===============
    // 资源弹窗
    zuiyuan(form) {
      let that = this;
      console.log("菜单id-----" + form.me_id);
      that.resourceData.m_id = form.me_id;
      searchAdminResourcePage(this.resourceData).then((res) => {
        console.log(res.data);
        if (res.code == 200) {
          that.ziyuanForm = res.data.list;
          console.log(that.ziyuanForm);
          // res.data.list = this.ziyuanForm;
        }
      });
      this.ziyuans = true;
      // this.ziyuanForm = form;
    },
    CloseZiyuan() {
      this.ziyuans = false;
    },
    addSoureces(menu_id) {
      console.log(menu_id);
      this.sourceTitle = "添加资源";
      this.addNewSource.re_menu_id = menu_id;
      this.addSource = true;
    },
    editSource(row) {
      this.editSourceS = true;
      console.log(row);
      for (let key in this.editSourceData) {
        if (key in row) {
          this.editSourceData[key] = row[key];
        }
      }
      console.log(this.editSourceData);
    },
    delSource(row) {
      console.log(row);
      this.deleteItem = true;
      this.deleteData.re_id = row.re_id;
    },
    deleteConfirm() {
      deleteAdminResource(this.deleteData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.editSourceS = false;
          this.ziyuans = false;
          this.deleteItem = false;
          this.$message({
            message: res.message,
            type: "success",
            duration: 1500,
          });
        }
      });
    },
    // 删除菜单
    delHandleClick(row) {
      this.deleteMenu.me_id = row.me_id;
      console.log(this.deleteMenu);
      this.deleteMenuItem = true;
    },
    deleteMenuConfirm() {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
        title: "查询中",
      });
      console.log("删除菜单确认");
      console.log(this.deleteMenu);
      deleteAdminMenu(this.deleteMenu).then((res) => {
        if (res.code == 200) {
          this.deleteMenuItem = false;
          this.secondMenu = false;
          this.$message.success(res.message);
          loadingInstance.close();
          this.initData();
        } else {
          console.log(res);
          alert(res.message);
          loadingInstance.close();
        }
      });
    },
    cancelSource(sourceForm) {
      if (sourceForm == "editSource") {
        console.log("编辑");
        console.log(this.editSourceData);
        this.editSourceS = false;
        this.$refs["editSource"].resetFields();
      } else if (sourceForm == "addNewSource") {
        console.log("确认添加");
        this.addSource = false;
        console.log(this.addNewSource);
        this.$refs["addNewSources"].resetFields();
      }
    },
    onSubmitSource(sourceForm) {
      if (sourceForm == "editSource") {
        console.log("编辑");
        console.log(this.editSourceData);
        editAdminResource(this.editSourceData).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.editSourceS = false;
            this.ziyuans = false;
            this.$message({
              message: res.message,
              type: "success",
              duration: 1500,
            });
          }
        });
      } else if (sourceForm == "addNewSources") {
        console.log("确认添加");
        console.log(this.addNewSource);
        // =====
        this.$refs[sourceForm].validate((valid) => {
          if (valid) {
            addAdminResource(this.addNewSource).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.addSource = false;
                this.ziyuans = false;
                this.$message({
                  message: res.message,
                  type: "success",
                  duration: 1500,
                });
                this.$refs["addNewSources"].resetFields();
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    // 新增 编辑
    onSubmit(form) {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      if (this.title == "添加菜单") {
        console.log(form);
        this.$refs[form].validate((valid) => {
          if (valid) {
            addAdminMenu(this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message);
                loadingInstance.close();
                this.initData();
              } else {
                alert(res.message);
                loadingInstance.close();
              }
            });
            console.log(this.form);
            this.addVisible = !this.addVisible;
            this.$refs["form"].resetFields();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        console.log("编辑");
        this.addVisible = !this.addVisible;
        console.log(this.form);
        editAdminMenu(this.form).then((res) => {
          console.log(res);
          if (res.code == 200) {
            // alert(res.message);
            this.$message.success(res.message);
            loadingInstance.close();
            this.initData();
          } else {
            loadingInstance.close();
            alert(res.message);
          }
        });
      }
    },
    // 批量删除
    // deleteTtem() {
    //   // let ywlsh = "";
    //   this.deleteCheckedArr.forEach((item) => {
    //     console.log(item);
    //     console.log(item.id);
    //     // ywlsh += "" + item.ywlsh + "," + "";
    //   });
    // },
    // 多选
    handleSelectionChange(val) {
      this.deleteCheckedArr = val;
      console.log(val);
    },
  },
};
</script>
<style lang="scss" scoped>
.imgWrite-top {
  //
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: 120px;
  box-sizing: border-box;
  /deep/.el-form-item__label {
    text-align: left;
    width: 90px;
    height: 40px;
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #13213b;
    padding: 0;
  }
}
.imgWrite-top {
  width: calc(100%);
}
/deep/.el-input--medium .el-input__inner {
  height: 40px;
  line-height: 40px;
}
/deep/.el-input__inner {
  border: 1px solid #d7dbe3 !important;
  background-color: white !important;
  border-radius: 6px !important;
}
#h {
  background-color: #e6effa;
  color: #126bff;
  margin-left: 10px;
  height: 36px;
  width: 78px;
  border-radius: 6px;
  opacity: 1;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
}
#c {
  height: 36px;
  width: 78px;
  background-color: #126bff;
  border-radius: 6px;
  opacity: 1;
  color: #ffffff;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  margin-left: 10px;
}
.admin-content {
  // overflow: hidden;
  margin-top: 20px;
  height: auto !important;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  flex: 1;
}
::v-deep.el-table th.el-table__cell {
  background-color: #ecf5ff !important;
  width: 64px !important;
  height: 21px !important;
  font-size: 16px !important;
  color: #13213b !important;
}
.admin-content > p:nth-of-type(1) {
  // border: 1px red solid;
  height: 40px;
  line-height: 40px;
  text-align: left;
  margin-bottom: 10px;
}
.content-top {
  text-align: left;
  padding: 10px 0 10px 0;
}
.content-top .el-button {
  width: 108px;
  height: 36px;
  background: #126bff;
  border-radius: 6px;
  opacity: 1;
  border: none;
}
.content-top .el-button:nth-of-type(2) {
  width: 108px;
  height: 36px;
  background: #ff4444;
  border-radius: 6px;
  opacity: 1;
}
/deep/.el-table th.el-table__cell {
  background-color: #ecf5ff !important;
  width: 64px;
  height: 21px;
  font-size: 16px;
  color: #13213b;
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
/deep/.el-dialog__header {
  text-align: left;
  width: 80px;
  height: 26px;
  font-size: 20px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
/deep/.el-dialog {
  width: 894px;
  // height: 520px;
  height: auto;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#menuSec {
  /deep/.el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
